<template>
  <div>
    <el-container>
      <el-header class="header">Header</el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu router>
            <el-submenu index="1" v-for="(item,index) in this.$router.options.routes" :key="index" v-if="!item.hidden">

              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item :index="children.path" :key="index" v-for="(children,index) in item.children">
                {{ children.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
export default {
  name: "Index"
}
</script>

<style scoped>
.header{
  background-color: #409EFF;
}
.aside{
  background-color: #67C23A;
}
</style>
